---
sidebar_position: 1
---

import ImagePreview from "@site/src/components/ImagePreview";

# 基础配置  

  组件的所有样式配置。  

  <ImagePreview alt="组基础配置配置" src="/img/docs/设计器/画布/配置/组件配置/基础/base-config-intro.jpg" /> 


## 通用配置  

  组件的**位置**、**尺寸**、**旋转**、**透明度**、**3d变换**（2022-07-08）、[**边框**（2022-10-10）](#border)  

## 边框 {#border}  

  组件均支持内置的装饰边框，方便用户快速成型大屏。 
  <ImagePreview alt="组基础配置配置" src="/img/docs/设计器/画布/配置/组件配置/基础/border.jpg" />  

## 特殊配置  

  每一组件的特殊配置，比如**柱形图**的柱子颜色，**标题**的文字动画，**图标**的类型。  

  关于每一组件的配置操作，会在后期补充。（2022-05-28）  

## 条件 {#condition}   

  针对当前**组件**，根据当前大屏内的一些已知**变量**或**常量**，响应预先设置的*条件*，触发对应的*事件*。

  <ImagePreview alt="条件" src="/img/docs/设计器/画布/配置/组件配置/基础/condition-intro.png" />   

  当前事件包括：**显示**、**隐藏**、**渐隐**、**渐显**、**渐隐渐现**。  

  条件设置包含：**可视化** 和 **自定义**  

### 可视化   

  条件可视化完成简易的条件设置。  

  条件为**树**的形式。  

  条件内部可以*嵌套*条件。  

  同级的条件表现为**并且**和**或者**两种。   
  **并且**表示所有同级*条件*都为正确时才是**正确**。  
  **或者**表示只要有*一个*条件正确就是**正确**。    

  单个条件包含三部分：**变量**、**条件**、**期望值**。  
  *变量*为全局参数。  
  *条件*现有的为**小于**、**大于**、**等于**、**包含**、**不小于**、**不大于**。  
  *期望值*表示期望针对变量**符合**条件的值。  
  比如**变量**值为`3`，条件为**等于**，则**正确**的**期望值**即为`3`。  

  <ImagePreview alt="条件例子" src="/img/docs/设计器/画布/配置/组件配置/基础/condition-example.png" />    

:::tip 提示

上述例子表示：  

  同时满足 a=100 并且 b>100 并且 c < 10 表示正确，否则为错误。  
  组件将触发**渐隐渐显**效果。  

:::  
### 自定义  

  <ImagePreview alt="条件例子" src="/img/docs/设计器/画布/配置/组件配置/基础/condition-example-2.png" />   

:::tip 提示

上述例子表示：  

  同时满足 a包含'hello' 并且 b包含'world' 表示正确，否则为错误。  
  组件将触发**隐藏**效果。  

::: 

  功能通过`javascript`代码逻辑完成。  
  整体为一个**函数**。 
  返回值类型为*布尔值（boolean）*。 

  函数的参数为`data`，值为上面*下拉*选择的大屏的**全局参数**。  
  关于**参数**查看**数据**文档。[传送门](/docs/设计器/配置/组件配置/数据)    

  具体例子可以查看此文档。[传送门](/docs/实例/example-1)    